<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h3>{{msg}}</h3>
<input type="button" value="点击" v-on:click="update">
<input type="button" value="点击" v-on:click="destroy">
</div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"hello vue"
        },
        methods:{
            update:function () {
                this.msg="welcome to mypage"
            },
            destroy:function () {
                this.$destroy();
            }
        },
        beforeCreate() {
            console.log("创造之前beforeCreate函数1")
        },
        created() {
            console.log("创造函数created函数2")
        },
        beforeMount() {
            console.log("挂载之前函数beforeMount函数3")
        },
        mounted() {
            console.log("挂载函数mounted函数4")
        },
        beforeUpdate() {
            console.log("更新之前beforeupdate函数5")
        },
        updated() {
            console.log("更新函数update函数6")
        },
        beforeDestroy() {
          console.log("更新之前beforedestroy函数7")
        },
        destroyed() {
            console.log("销毁函数destroyed函数8")
        }
    })
</script>
</html>